<template>
  <view>
    <!-- 自定义导航栏 -->
    <uni-nav-bar :border="false" :statusBar="true">
      <!-- 导航栏标题 -->
      <view class="display-default navBar-title">
        <text class="navBar-title-text">场馆预约</text>
      </view>
      <!-- 导航栏左侧-我的预约 -->
      <template v-slot:left>
        <view class="display-default" style="border-bottom: .5px solid #ccc;padding-right: 10rpx;" @click="toMySports">
          <image style="width: 55rpx;height: 55rpx;" src="/static/sports/mySports.png" mode=""></image>
          <text>我的预约</text>
        </view>
      </template>
      <!-- 导航栏右侧-仿小程序退出按钮胶囊 -->
      <template v-slot:right>
        <view class="display-default navBar-title-right">
          <!-- 查看更多-3个点 -->
          <view class="display-default" @click="navBarTitleRightItemClick('more')">
            <image class="navBar-title-right-icon" src="/static/selectPress/more.png"></image>
          </view>

          <!-- 查看更多和退出的中线 -->
          <view class="navBar-title-right-midcourtLine"></view>

          <!-- 退出 -->
          <view class="display-default" style="" @click="navBarTitleRightItemClick('exit')">
            <image class="navBar-title-right-icon" style="" src="/static/selectPress/exit.png"></image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 场馆详情 -->
    <view class="sports-item">
      <image class="sports-item-left" :src="$url+sports.cover" mode="aspectFill"
        @click="previewImage($url+sports.cover)">
      </image>
      <view class="sports-item-right">
        <text class="astrict-text" style="font-size: 18px;">{{sports.name}}</text>
        <text class="astrict-text" style="color: #999;" v-if="sports.address">{{sports.address}}</text>
        <!-- <text class="astrict-text" style="color: #999;"></text> -->
        <!-- <text class="astrict-text" style="color: red;">费用：{{sports.money}}元起</text> -->
        <text class="astrict-text" style="color: #999;">营业时间：{{sports.openingHours}}</text>
      </view>
    </view>

    <!-- 联系电话 -->
    <view style="font-size: 16px;padding: 40rpx;">
      <text>联系电话：</text>
      <text style="color: blue;border-bottom: 1px solid blue;"
        @click="toPhone(sports.phoneNumber)">{{sports.phoneNumber}}</text>
    </view>

    <!-- 分割线 -->
    <view class="halving-line"> </view>

    <!-- 标题栏：请选择日期 -->
    <uni-section titleFontSize="15px" title="请选择日期" type="line"></uni-section>

    <!-- 自定义预约日期 -->
    <view class="dateCustom-box">
      <uni-row>
        <!-- 这里报错提示找不到name属性，原因是超出了索引边界：++直接作用于this.dateCustom，而+1作用于块级作用域，没有作用全局 -->
        <!-- <uni-col :span="24/dateCustom.length++" v-for="(item,index) in dateCustom" :key="index"> -->
        <uni-col :span="24/(dateCustom.length+1)" v-for="(item,index) in dateCustom" :key="index">
          <view class="display-default dateCustom-item"
            :style="item.orderDate == orderDate ? 'background: #ff3535;color:#fff;boder: 1px solid #ff3535;' : ''"
            @click="dateCustomClick(item)">
            <text>{{item.name}}</text>
            <uni-dateformat format="MM月dd日" :date="item.orderDate"></uni-dateformat>
          </view>
        </uni-col>
        <!-- 其他日期-点击弹窗 -->
        <uni-col :span="24/(dateCustom.length+1)">
          <view class="display-default dateCustom-item"
            :style="orderDateName == '其他日期' ? 'background: #ff3535;color:#fff;boder: 1px solid #ff3535;' : ''"
            @click="calendarShow=!calendarShow">
            <view class="display-default" style="flex-direction: column;" v-show="orderDateName == '其他日期'">
              <uni-dateformat format="yyyy年" :date="orderDate"></uni-dateformat>
              <uni-dateformat format="MM月dd日" :date="orderDate"></uni-dateformat>
            </view>
            <text v-show="orderDateName != '其他日期'">其他日期</text>
          </view>
          <!-- 选择日期弹窗-最小选择日期为大后天-默认选择的日期也为大后天 -->
          <u-calendar :show="calendarShow" mode="single"
            :minDate="new Date(dateCustom[2].orderDate).getTime() + 1000 * 60 * 60 * 24"
            :defaultDate="new Date(new Date(dateCustom[2].orderDate).getTime() + 1000 * 60 * 60 * 24)"
            @confirm="calendarConfirm" @close="calendarShow=!calendarShow" :closeOnClickOverlay="true"></u-calendar>
        </uni-col>
      </uni-row>
    </view>

    <!-- 标题栏：请选择预约场次 -->
    <uni-section titleFontSize="15px" title="请选择预约场次" type="line"></uni-section>

    <!-- 预约场次 -->
    <view class="dateCustom-box">
      <uni-grid :column="2" :square="false" :showBorder="false" :highlight="false">
        <uni-grid-item v-for="(item,index) in sportsTime" :key="index">
          <view style="display: flex;flex-direction: column;" @click="sportsTimeClick(item)">
            <view class="display-default"
              style="height: 100%;border-radius: 10px;border: 1px solid #f0f0f0;padding:10rpx 0rpx;margin: 0 10rpx 20rpx 10rpx;flex-direction: column;"
              :style="item.uid || new Date(orderDate+' '+item.startDate) < new Date() ? 'background: #eee;border: 1px solid #eee;' : item.sportsTimeId == sportsTimeId ? 'background: #ff3535;color:#fff;border: 1px solid #ff3535;' : ''">
              <view>
                <text>第{{index+1}}场</text>
                <uni-dateformat format="hh:mm" :date="'2000-11-11 '+item.startDate"></uni-dateformat>
                <text>-</text>
                <uni-dateformat format="hh:mm" :date="'2000-11-11 '+item.endDate"></uni-dateformat>
              </view>
              <text v-text="new Date(orderDate+' '+item.startDate) < new Date() ? '已过期' : item.uid ? '无空位' : '有空位'"
                :style="item.uid || new Date(orderDate+' '+item.startDate) < new Date() ? 'color:red' : item.sportsTimeId == sportsTimeId ? 'color:#fff;' : 'color:green'"></text>
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 底部提交预约按钮 -->
    <view class="display-default publish-press">
      <!-- 取消 -->
      <view class="display-default publish-press-cancel">
        <text class="publish-press-cancel-text" @click="backPage">取消</text>
      </view>
      <!-- 申请发布 -->
      <view class="display-default publish-press-confirm" @click="submitSports">
        <text class="publish-press-confirm-text">提交预约</text>
      </view>
    </view>

    <!-- 右上角胶囊选项弹出层 -->
    <uni-popup ref="pressPopup" type="bottom">
      <view class="pressDialog-popup-body">
        <view class="display-default" style="justify-content: flex-start;padding: 30rpx;">
          <view class="select-press-item" @click="pressSelect('refresh')">
            <uni-icons style="background: #eee;padding: 20rpx;border-radius: 60px;" custom-prefix="iconfont"
              type="refreshempty" size="55rpx" color="#000"></uni-icons>
            <text style="color: #000;font-size: 12px;padding: 10rpx 0 0 20rpx;">刷新</text>
          </view>
        </view>
        <button class="pressDialog-button-cancel" @click="popupClose('pressPopup')">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        calendarShow: false, // 日期选择的布尔变量用于打开或收起日历弹窗
        sportsId: 0, // 场馆id
        orderDateName: '', // 获取当前点击的 【今天、明天、后天】
        orderDate: '', // 当前选择的预约日期
        sportsTimeId: 0, // 当前选择的预约场次Id
        startDate: '', // 当前选择的预约时间-开始
        endDate: '', // 当前选择的预约时间-结束
        isSubmitSports: false, // 节流阀，同一时间只能有一个提交预约请求
        sports: {}, // 场馆信息
        sportsTime: [], // 场馆预约的时间段
        dateCustom: [] // 分别为 【今天、明天、后天和其他日期】
      };
    },
    onLoad(e) {
      // console.log("new Date(item.orderDate+' '+item.startDate).getTime(): ",new Date(item.orderDate+' '+item.startDate).getTime());

      // console.log("new Date().getTime(): ", JSON.stringify(new Date(item.orderDate+' '+item.startDate)));
      console.log("new Date().getTime(): ", JSON.stringify(new Date()));

      this.sportsId = e.sportsId
      this.setDateCustom()
    },
    methods: {
      /**
       * @description 顶部导航栏more和exit点击事件
       */
      navBarTitleRightItemClick(name) {
        if (name == 'exit') {
          uni.navigateBack({
            delta: 9
          })
        }

        if (name == 'more') {
          this.$refs.pressPopup.open()
          console.log("点击3个点");
          return
        }
        console.log(name);
      },

      /**
       * @description 预约场次点击
       */
      sportsTimeClick(item) {
        console.log("item: " + JSON.stringify(item));

        if (!item.uid) {
          // 未被预约才能被点击
          this.sportsTimeId = item.sportsTimeId
          this.startDate = item.startDate
          this.endDate = item.endDate
        }
      },

      /**
       * @description 日期选择-弹窗-点击确定按钮的回调事件
       * @param {Date} date 选择的日期 格式：【2022-11-23】
       */
      calendarConfirm(date) {
        this.calendarShow = false
        this.orderDateName = '其他日期'
        this.orderDate = date[0] // 获取当前点击的日期
        this.getSportsBySportsId(this.sportsId, this.orderDate)
      },

      /**
       * @description 根据传入的手机号拉起用户拨号键盘进行拨打电话操作
       */
      toPhone(phoneNumber) {
        console.log("phoneNumber: ", phoneNumber);

        uni.makePhoneCall({
          phoneNumber: phoneNumber //仅为示例
        });
      },

      /**
       * @description popup弹出层功能列表点击
       */
      pressSelect(name) {
        console.log("name: ", name);

        if (name == 'refresh') {
          uni.redirectTo({
            url: `/pages/sportsView/sportsViewDetail/sportsViewDetail?sportsId=${this.sportsId}`
          })
          return
        }
      },

      /**
       * @description popup弹出层关闭事件
       */
      popupClose(name) {
        if (name == 'pressPopup') {
          this.$refs.pressPopup.close()
        }
      },

      /**
       * @description 跳转到我的预约
       */
      toMySports() {
        if (!uni.getStorageSync('token')) {
          // #ifdef H5
          // this.$refs.loginPopup.open() 
          return
          // #endif 

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        uni.navigateTo({
          url: '/pages/sportsView/mySports/mySports'
        })
        return
      },

      /**
       * @description 日期设置自定义，分别为 【今天、明天、后天和其他日期】
       */
      setDateCustom() {
        /**
         * 扩展Date的Format函数
         * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
         * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
         * @param {[type]} fmt [description]
         */
        Date.prototype.Format = function(fmt) { //author: meizz 
          var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "S": this.getMilliseconds() //毫秒 
          };
          if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (
              ("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
        }

        // console.log((new Date()).Format("yyyy-MM-dd hh:mm:ss")); // 2018-08-02 21:22:07

        // 添加今天、明天、后天的日期
        let name;
        for (let i = 0; i < 3; i++) {
          if (i == 0) name = '今天'
          else if (i == 1) name = '明天'
          else if (i == 2) name = '后天'

          this.dateCustom.push({
            name: name,
            orderDate: new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * i).Format("yyyy-MM-dd")
          })

        }

        // 默认点击第一个日期
        this.orderDate = this.dateCustom[0].orderDate // 默认是今天的日期
        this.orderDateName = '今天' // 默认是今天
        this.getSportsBySportsId(this.sportsId, this.dateCustom[0].orderDate)
      },

      /**
       * @description 自定义预约日期点击
       * @param orderDate 预约日期
       */
      dateCustomClick(item) {
        this.orderDateName = item.name // 获取当前点击的 【今天、明天、后天】
        this.orderDate = item.orderDate // 获取当前点击的日期
        this.getSportsBySportsId(this.sportsId, item.orderDate)
      },

      /**
       * @description 根据场馆id获取场馆详情信息-包括预约的时间段
       * @param sportsId 场馆id
       * @param orderDate 预约日期（可选）
       */
      async getSportsBySportsId(sportsId, orderDate) {
        await this.$http.sports.getSportsBySportsIdInfo(sportsId, orderDate).then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          this.sports = res.data.sports
          this.sportsTime = res.data.sportsTime
          // console.log("this.sports: " + JSON.stringify(this.sports));
          console.log("this.sportsTime: " + JSON.stringify(this.sportsTime));
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },

      /**
       * @description 预览多张图片Item点击
       */
      previewImage(imgUrl) {
        uni.previewImage({
          urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: '' // 当前显示图片的http链接，默认是第一个
        })
      },

      /**
       * @description 点击底部取消
       */
      backPage() {
        uni.navigateBack()
      },

      /**
       * @description 底部提交预约
       */
      async submitSports() {
        if (!uni.getStorageSync('token')) {
          // #ifdef H5
          // this.$refs.loginPopup.open()
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          // #endif
          return
        }

        let sportsOrder = {
          sportsId: this.sportsId,
          sportsTimeId: this.sportsTimeId,
          orderDate: this.orderDate,
          startDate: this.startDate,
          endDate: this.endDate
        }

        console.log("sportsOrder: " + JSON.stringify(sportsOrder));

        if (!sportsOrder.startDate) {
          uni.showToast({
            title: '请先选择要预约的场次',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 循环判断用户，看当前日期低下的时间段是否为已预约的/已过期的
        for (let i = 0; i < this.sportsTime.length; i++) {
          // 找出当前选择的时间段，就是怕用户先选择了不同日期的相同时间段，导致用户选择已过期的或者无空位的场次
          if (this.sportsTime[i].startDate == sportsOrder.startDate && this.sportsTime[i].endDate == sportsOrder
            .endDate) {
            // 判断是否已过期
            if (this.orderDateName == '今天' && new Date(this.orderDate + ' ' + sportsOrder.startDate) <
              new Date()) {
              // 如果已过期则弹出提示并返回
              uni.showToast({
                title: '请先选择要预约的场次',
                icon: 'none',
                position: 'center'
              });
              return
            }
            // 判断是否已被预约
            console.log("this.sportsTime[i].uid: ", this.sportsTime[i].uid);
            if (this.sportsTime[i].uid) {
              // 如果已被预约则弹出提示并返回
              uni.showToast({
                title: '请先选择要预约的场次',
                icon: 'none',
                position: 'center'
              });
              return
            } else {
              // 如果没有被预约则跳出循环，继续往下执行
              break
            }
          }
        }

        console.log("sportsTimeId: ", sportsOrder.sportsTimeId);
        console.log("orderDate: ", sportsOrder.orderDate);
        console.log("startDate: ", sportsOrder.startDate);
        console.log("endDate: ", sportsOrder.endDate);

        if (this.isSubmitSports) return
        // 开启节流阀
        this.isSubmitSports = true
        await this.$http.sports.addSportsOrderInfo(uni.getStorageSync('token'), sportsOrder).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          if (res.code == 200) {
            uni.showToast({
              title: '预约成功！',
              icon: 'none',
              position: 'center'
            });

            // 重新拉取数据，更新
            this.getSportsBySportsId(this.sportsId, this.orderDate)
            return
          }
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        // 关闭节流阀
        this.isSubmitSports = false
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  // 自定义导航栏样式-1
  /deep/ .uni-navbar__header {
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 1;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 1;
  }

  // 自定义标题样式
  /deep/ .uni-section .uni-section-header__decoration {
    background-color: red !important;
  }

  // 自定义导航栏样式
  .navBar-title {
    text-align: center;
    width: 100%;
    height: 100%;

    // 导航栏标题样式
    & .navBar-title-text {
      font-size: 17px;
    }
  }

  // 导航栏右侧，仿小程序胶囊图标样式
  .navBar-title-right {
    border: 0.9px solid #cdcdcd;
    border-radius: 60px;
    height: 65%;

    // 图标样式
    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
      padding: 15rpx 22rpx;
    }

    // 中线
    & .navBar-title-right-midcourtLine {
      height: 60%;
      width: 1px;
      border-left: 1px solid #e3e3e3;
    }
  }

  // 场馆列表item
  .sports-item {
    display: flex;
    padding: 25rpx;
    border-bottom: 1px solid #f0f0f0;

    // 场馆列表左侧
    & .sports-item-left {
      width: 25%;
      height: 160rpx;
      margin-right: 5%;
    }

    // 场馆列表右侧
    & .sports-item-right {
      display: flex;
      flex-direction: column;
      width: 60%;
    }
  }

  // 分割线
  .halving-line {
    width: 100%;
    background: #f5f5f5;
    height: 10rpx;
  }

  // 自定义预约日期 【今天、明天、后天】
  .dateCustom-box {
    padding: 0 20rpx;
    color: #7d7d7d;
    font-size: 16px;

    & .dateCustom-item {
      flex-direction: column;
      height: 100rpx;
      border-radius: 10px;
      border: 1px solid #f0f0f0;
      margin: 0 5rpx;
    }
  }

  // 底部申请发布按钮
  .publish-press {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;

    // 取消
    & .publish-press-cancel {
      height: 100%;
      width: 35%;
      background: #f5f5f5;

      & .publish-press-cancel-text {
        font-size: 17px;
        color: #000;
      }
    }

    // 申请发布
    & .publish-press-confirm {
      height: 100%;
      width: 65%;
      background: #ff3d3d;

      & .publish-press-confirm-text {
        font-size: 17px;
        color: #fff;
      }
    }
  }

  // 右上角胶囊选项弹出层样式
  .pressDialog-popup-body {
    padding-bottom: 10rpx;
    border-radius: 10px 10px 0 0;
    background: #fff;

    & .select-press-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 50rpx;
    }

    & .pressDialog-button-cancel {
      background: #eee;
      margin-top: 10rpx;
      padding: 5rpx 0;
      font-size: 16px;
      width: 95%;
    }
  }
</style>
